/*
 * Description: 方形单选框
 * Author: ty
 * Created on 2025-8-9 14:24
 */

<template>
    <div class="yd-square-radio-wp">
        <div class="item" v-for="(item, index) in tList" :key="index">
            <el-checkbox :value="item.checked" @change="handleChange($event, index)">{{ item.label }}</el-checkbox>
        </div>
    </div>
</template>
<script>
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: [String, Number, undefined],
            default: ''
        },
        list: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        // 列表
        tList() {
            let arr = JSON.parse(JSON.stringify(this.list));
            arr.forEach(item => {
                item.checked = item.value == this.value;
            });
            return arr;
        },
    },
    data() {
        return {
            
        };
    },
    mounted() {
        
    },
    methods: {
        handleChange(state, idx) {
            // 设置false不用管
            if(!state) return;

            // 更新选中的项
            this.tList.forEach((item,index) => {
                if(item.checked && index != idx) {
                    item.checked = false;
                } else if(!item.checked && index == idx) {
                    item.checked = true;
                }
            })
            this.$emit('change', this.tList[idx].value);
        }
    }
};
</script>
<style scoped lang='scss'>
.yd-square-radio-wp {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}
</style>